<template>
  <el-row :gutter="90">
    <el-col :span="1" v-for="(openedTag, index) in openedTagList" :key="index">
      <el-tag
          :class="['wl-header-tag', 'el-button', 'el-button--mini', 'is-round', {action: openedTag.isAction}]"
          type="success" :closable="true"
          effect="dark" size="medium" @click="tagAction(index)" @close="tagClose(index)">{{ openedTag.label }}
      </el-tag>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "WLTag",
  data(){
    return {
      openedTagList: [
        {
          label: "首页",
          isAction: true
        },
        {
          label: "首页",
          isAction: false
        },
        {
          label: "首页",
          isAction: false
        },
      ],
    }
  },
  methods: {
    tagAction(index) {
      this.openedTagList.forEach((openedTag) => {
        openedTag.isAction = false
      })
      this.openedTagList[index].isAction = true
    },
    tagClose(index) {
      this.openedTagList.splice(index, 1)
    }
  }
}
</script>

<style scoped>

</style>
